/* 第一部分 */
.slide-in-bck-top {
    -webkit-animation: slide-in-bck-top 0.6s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
    animation: slide-in-bck-top 0.6s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

@-webkit-keyframes slide-in-bck-top {
    0% {
        -webkit-transform: translateZ(700px) translateY(-300px);
        transform: translateZ(700px) translateY(-300px);
        opacity: 0;
    }

    100% {
        -webkit-transform: translateZ(0) translateY(0);
        transform: translateZ(0) translateY(0);
        opacity: 1;
    }
}

@keyframes slide-in-bck-top {
    0% {
        -webkit-transform: translateZ(700px) translateY(-300px);
        transform: translateZ(700px) translateY(-300px);
        opacity: 0;
    }

    100% {
        -webkit-transform: translateZ(0) translateY(0);
        transform: translateZ(0) translateY(0);
        opacity: 1;
    }
}

.slide-in-elliptic-left-bck {
    -webkit-animation: slide-in-elliptic-left-bck 1.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
    animation: slide-in-elliptic-left-bck 1.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

@-webkit-keyframes slide-in-elliptic-left-bck {
    0% {
        -webkit-transform: translateX(-800px) rotateY(-30deg) scale(6.5);
        transform: translateX(-800px) rotateY(-30deg) scale(6.5);
        -webkit-transform-origin: 200% 50%;
        transform-origin: 200% 50%;
        opacity: 0;
    }

    100% {
        -webkit-transform: translateX(0) rotateY(0) scale(1);
        transform: translateX(0) rotateY(0) scale(1);
        -webkit-transform-origin: -600px 50%;
        transform-origin: -600px 50%;
        opacity: 1;
    }
}

@keyframes slide-in-elliptic-left-bck {
    0% {
        -webkit-transform: translateX(-800px) rotateY(-30deg) scale(6.5);
        transform: translateX(-800px) rotateY(-30deg) scale(6.5);
        -webkit-transform-origin: 200% 50%;
        transform-origin: 200% 50%;
        opacity: 0;
    }

    100% {
        -webkit-transform: translateX(0) rotateY(0) scale(1);
        transform: translateX(0) rotateY(0) scale(1);
        -webkit-transform-origin: -600px 50%;
        transform-origin: -600px 50%;
        opacity: 1;
    }
}

.tracking-in-contract-bck-top {
    -webkit-animation: tracking-in-contract-bck-top 1s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
    animation: tracking-in-contract-bck-top 1s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
}

@-webkit-keyframes tracking-in-contract-bck-top {
    0% {
        letter-spacing: 1em;
        -webkit-transform: translateZ(400px) translateY(-300px);
        transform: translateZ(400px) translateY(-300px);
        opacity: 0;
    }

    40% {
        opacity: 0.6;
    }

    100% {
        -webkit-transform: translateZ(0) translateY(0);
        transform: translateZ(0) translateY(0);
        opacity: 1;
    }
}

@keyframes tracking-in-contract-bck-top {
    0% {
        letter-spacing: 1em;
        -webkit-transform: translateZ(400px) translateY(-300px);
        transform: translateZ(400px) translateY(-300px);
        opacity: 0;
    }

    40% {
        opacity: 0.6;
    }

    100% {
        -webkit-transform: translateZ(0) translateY(0);
        transform: translateZ(0) translateY(0);
        opacity: 1;
    }
}


.tracking-in-contract-bck {
    -webkit-animation: tracking-in-contract-bck 1s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
    animation: tracking-in-contract-bck 1s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
}

@-webkit-keyframes tracking-in-contract-bck {
    0% {
        letter-spacing: 1em;
        -webkit-transform: translateZ(400px);
        transform: translateZ(400px);
        opacity: 0;
    }

    40% {
        opacity: 0.6;
    }

    100% {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
        opacity: 1;
    }
}

@keyframes tracking-in-contract-bck {
    0% {
        letter-spacing: 1em;
        -webkit-transform: translateZ(400px);
        transform: translateZ(400px);
        opacity: 0;
    }

    40% {
        opacity: 0.6;
    }

    100% {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
        opacity: 1;
    }
}

.shake-bottom {
    -webkit-animation: shake-bottom 0.8s 2s cubic-bezier(0.455, 0.030, 0.515, 0.955) both;
    animation: shake-bottom 0.8s 2s cubic-bezier(0.455, 0.030, 0.515, 0.955) both;
}

@-webkit-keyframes shake-bottom {

    0%,
    100% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
        -webkit-transform-origin: 50% 100%;
        transform-origin: 50% 100%;
    }

    10% {
        -webkit-transform: rotate(2deg);
        transform: rotate(2deg);
    }

    20%,
    40%,
    60% {
        -webkit-transform: rotate(-4deg);
        transform: rotate(-4deg);
    }

    30%,
    50%,
    70% {
        -webkit-transform: rotate(4deg);
        transform: rotate(4deg);
    }

    80% {
        -webkit-transform: rotate(-2deg);
        transform: rotate(-2deg);
    }

    90% {
        -webkit-transform: rotate(2deg);
        transform: rotate(2deg);
    }
}

@keyframes shake-bottom {

    0%,
    100% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
        -webkit-transform-origin: 50% 100%;
        transform-origin: 50% 100%;
    }

    10% {
        -webkit-transform: rotate(2deg);
        transform: rotate(2deg);
    }

    20%,
    40%,
    60% {
        -webkit-transform: rotate(-4deg);
        transform: rotate(-4deg);
    }

    30%,
    50%,
    70% {
        -webkit-transform: rotate(4deg);
        transform: rotate(4deg);
    }

    80% {
        -webkit-transform: rotate(-2deg);
        transform: rotate(-2deg);
    }

    90% {
        -webkit-transform: rotate(2deg);
        transform: rotate(2deg);
    }
}


/* 第二部分和第三部分 */
.focus-in-expand {
    -webkit-animation: focus-in-expand 0.8s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
    animation: focus-in-expand 0.8s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

@-webkit-keyframes focus-in-expand {
    0% {
        letter-spacing: -0.5em;
        -webkit-filter: blur(12px);
        filter: blur(12px);
        opacity: 0;
    }

    100% {
        -webkit-filter: blur(0px);
        filter: blur(0px);
        opacity: 1;
    }
}

@keyframes focus-in-expand {
    0% {
        letter-spacing: -0.5em;
        -webkit-filter: blur(12px);
        filter: blur(12px);
        opacity: 0;
    }

    100% {
        -webkit-filter: blur(0px);
        filter: blur(0px);
        opacity: 1;
    }
}



/* 倒计时部分 */
.tracking-in-contract-bck-bottom {
    -webkit-animation: tracking-in-contract-bck-bottom 1s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
    animation: tracking-in-contract-bck-bottom 1s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
}

@-webkit-keyframes tracking-in-contract-bck-bottom {
    0% {
        letter-spacing: 1em;
        -webkit-transform: translateZ(400px) translateY(300px);
        transform: translateZ(400px) translateY(300px);
        opacity: 0;
    }

    40% {
        opacity: 0.6;
    }

    100% {
        -webkit-transform: translateZ(0) translateY(0);
        transform: translateZ(0) translateY(0);
        opacity: 1;
    }
}

@keyframes tracking-in-contract-bck-bottom {
    0% {
        letter-spacing: 1em;
        -webkit-transform: translateZ(400px) translateY(300px);
        transform: translateZ(400px) translateY(300px);
        opacity: 0;
    }

    40% {
        opacity: 0.6;
    }

    100% {
        -webkit-transform: translateZ(0) translateY(0);
        transform: translateZ(0) translateY(0);
        opacity: 1;
    }
}

/* 第六部分（总结） */
.tracking-in-contract-bck-top-res-section {
    -webkit-animation: tracking-in-contract-bck-top .7s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
    animation: tracking-in-contract-bck-top .7s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
}

/* 第七部分（相册） */
.slide-in-bck-bl-photos-list {
    -webkit-animation: slide-in-bck-bl 2.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
    animation: slide-in-bck-bl 2.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

@-webkit-keyframes slide-in-bck-bl {
    0% {
        -webkit-transform: translateZ(700px) translateY(300px) translateX(-400px);
        transform: translateZ(700px) translateY(300px) translateX(-400px);
        opacity: 0;
    }

    100% {
        -webkit-transform: translateZ(0) translateY(0) translateX(0);
        transform: translateZ(0) translateY(0) translateX(0);
        opacity: 1;
    }
}

@keyframes slide-in-bck-bl {
    0% {
        -webkit-transform: translateZ(700px) translateY(300px) translateX(-400px);
        transform: translateZ(700px) translateY(300px) translateX(-400px);
        opacity: 0;
    }

    100% {
        -webkit-transform: translateZ(0) translateY(0) translateX(0);
        transform: translateZ(0) translateY(0) translateX(0);
        opacity: 1;
    }
}
